import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}
class MainPage extends StatefulWidget {
  MainPage({Key? key}) : super(key: key);

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  final ScrollController _controller = ScrollController();//滚动控制器
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       home:Scaffold(appBar:AppBar(title:Text("滚动列表"),) ,
       body:CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Container(
              height: 100,
              color: Colors.blue,
              child:Text("轮播图",
              style:TextStyle(
                fontSize: 20,
                color: Colors.white,
              )),
              alignment: Alignment.center,
            ),
          ),
          SliverToBoxAdapter(
            child:SizedBox(
              height: 20,
            )
          ),
          SliverPersistentHeader(delegate: _StickyCategory(), pinned: true,),
          SliverToBoxAdapter(
            child:SizedBox(
              height: 20,
            )
          ),
          SliverGrid.count(
            crossAxisCount: 2,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            children:List.generate(100,(index){
              return Container(alignment: Alignment.center,child: Text("第${index+1}个商品",style: TextStyle(fontSize: 20,color: Colors.white,),),color: Colors.blue,);

            }),
          ),
          SliverList.separated(
            itemCount: 100,
            separatorBuilder: (BuildContext context, int index) => SizedBox(height: 10,),
            itemBuilder: (BuildContext context, int index) {
              return Container(
                height: 100,
                color: Colors.blue,
                child: Text('Item $index'),
              );
            },
          ),
        ],
       )
    ));  
  }
}

class _StickyCategory extends SliverPersistentHeaderDelegate {
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      child:ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 10,
        itemBuilder: (BuildContext context,int index){
          return Container(
            width: 100,
            color: Colors.blue,
            alignment: Alignment.center,
            margin: EdgeInsets.symmetric(horizontal: 10),
            child:Text("第${index+1}个分类",
            style:TextStyle(
              color: Colors.white,
            )),
          );
        },
      ),
      alignment: Alignment.center,
    );
  }
  
  @override
  // TODO: implement maxExtent
  double get maxExtent => 100;//最大展开高度
  
  @override
  // TODO: implement minExtent
  double get minExtent => 60;//最小折叠高度
  
  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    // TODO: implement shouldRebuild
    return false;
  }
}